<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位-父没有定位</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid quas earum voluptatibus perferendis porro, inventore libero enim blanditiis ipsa nam corrupti, illo aut ad aspernatur voluptates est, saepe consequuntur a?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid quas earum voluptatibus perferendis porro, inventore libero enim blanditiis ipsa nam corrupti, illo aut ad aspernatur voluptates est, saepe consequuntur a?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid quas earum voluptatibus perferendis porro, inventore libero enim blanditiis ipsa nam corrupti, illo aut ad aspernatur voluptates est, saepe consequuntur a?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid quas earum voluptatibus perferendis porro, inventore libero enim blanditiis ipsa nam corrupti, illo aut ad aspernatur voluptates est, saepe consequuntur a?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid quas earum voluptatibus perferendis porro, inventore libero enim blanditiis ipsa nam corrupti, illo aut ad aspernatur voluptates est, saepe consequuntur a?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid quas earum voluptatibus perferendis porro, inventore libero enim blanditiis ipsa nam corrupti, illo aut ad aspernatur voluptates est, saepe consequuntur a?</div>
    <!-- 绝对定位脱离文档流 -->
    <div class="box"></div>
</body>
</html>
